<template>
  <div>
    <div id="amap-container"></div>
  </div>
</template>

<script>
import AMap from "AMap";
import { card_getLocationCard } from "@/api/alumni";

export default {
  name: "Amap",
  components: {},
  data() {
    return {
      Amap: {},
      markerList: [],
    };
  },
  filters: {},
  created() {},
  computed: {},
  mounted() {
    this.initAMap();
  },
  methods: {
    initAMap() {
      const map = new AMap.Map("amap-container", {
        rotateEnable: true,
        pitchEnable: true,
        resizeEnable: true,
        center: [120.32586186339995, 32.50573954206301], // 中心点
        zoom: 8, // 级别
        fitView: true,
        viewMode: "3D", // 使用3D视图
      });
      // 插件加载
      const plugin = [
        "AMap.ToolBar",
        "AMap.Driving",
        "AMap.DistrictSearch",
        "AMap.Scale",
        "AMap.ControlBar",
      ];
      AMap.plugin(plugin, () => {
        this.getLocation(map);
        this.handlePolygon(map);
        map.addControl(new AMap.ToolBar());
        map.addControl(new AMap.ControlBar());
        map.setFitView();
        map.on("complete", console.log("地图加载完成"));
        this.Amap = map;
      });
    },
    // 校友
    getLocation(map) {
      card_getLocationCard().then((res) => {
        let data = this.$s.res(res);
        data.forEach((item) => {
          // console.log(item.coordinate.split(",").map(Number));
          let avatar = item.avatar;
          if (item.avatar) {
            avatar = item.avatar + "?thumb=1";
          } else {
            avatar = "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png";
          }
          const marker = new AMap.Marker({
            map: map,
            position: item.coordinate.split(",").map(Number),
            icon: avatar,
            extData: {
              realName: item.realName,
              graduationYear: item.graduationYear,
              workCompany: item.workCompany,
              workPosition: item.workPosition,
              workPlace: item.workPlace,
              workCategory: item.workCategory,
              workIndustry: item.workIndustry,
              graduationClass: item.graduationClass,
              position: item.position,
            },
          });
          marker.on("click", this.openInfo);
          // if (m.quantity === 0) {
          //   const marker = new AMap.Marker({
          //     map: map,
          //     position: m.markpoint.position,
          //     extData: {
          //       name: m.entName,
          //       registrationAddress: m.registrationAddress,
          //       a: m.quantity,
          //       b: "100",
          //     },
          //   });
          //   marker.on("click", this.openInfo);
          // } else {
          //   const marker = new AMap.Marker({
          //     map: map,
          //     position: m.markpoint.position,
          //     icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",
          //     extData: {
          //       name: m.entName,
          //       registrationAddress: m.registrationAddress,
          //       a: m.quantity,
          //       b: "100",
          //     },
          //   });
          //   marker.on("click", this.openInfo);
          // }
        });
      });
    },
    // 行政区
    handlePolygon(map) {
      // 南通市
      new AMap.DistrictSearch({
        subdistrict: 0, // 获取边界不需要返回下级行政区
        extensions: "all", // 返回行政区边界坐标组等具体信息
        level: "district", // 查询行政级别为 市
      }).search("南通市", function (status, result) {
        const polygons = [];
        var bounds = result.districtList[0].boundaries;
        if (bounds) {
          for (var i = 0, l = bounds.length; i < l; i++) {
            // 生成行政区划polygon
            var polygon = new AMap.Polygon({
              strokeWeight: 1,
              path: bounds[i],
              fillOpacity: 0.35, // 填充透明度
              fillColor: "#d6f6ff", // 填充色
              strokeColor: "#0091ea", // 边框线颜色
            });
            polygons.push(polygon);
          }
        }
        map.add(polygons);
      });
      // 海南市
      new AMap.DistrictSearch({
        subdistrict: 0, // 获取边界不需要返回下级行政区
        extensions: "all", // 返回行政区边界坐标组等具体信息
        level: "district", // 查询行政级别为 市
      }).search("海南市", function (status, result) {
        const polygons = [];
        var bounds = result.districtList[0].boundaries;
        if (bounds) {
          for (var i = 0, l = bounds.length; i < l; i++) {
            // 生成行政区划polygon
            var polygon = new AMap.Polygon({
              strokeWeight: 1,
              path: bounds[i],
              fillOpacity: 0.4,
              fillColor: "#80d8ff",
              strokeColor: "#0091ea",
            });
            polygons.push(polygon);
          }
        }
        map.add(polygons);
      });
    },
    // 信息框
    openInfo(e) {
      var infoWindow;
      var info = [];
      const item = e.target.getExtData();
      info.push("<div class='input-card content-window-card'>");
      // (${item.graduationYear}届${item.graduationClass})${item.position}
      info.push(
        `<div><p style='color:#007faa'>${item.realName}</p>`
      );
      info.push(`<p tyle='color:#007faa'>工作单位：${item.workCompany}</p>`);
      info.push(`<p tyle='color:#007faa'>单位职务：${item.workPosition}</p>`);
      info.push(`<p tyle='color:#007faa'>工作地点：${item.workPlace}</p>`);
      info.push(
        `<p tyle='color:#007faa'>单位所属类别 :${item.workCategory}</p>`
      );
      info.push(`<p tyle='color:#007faa'>单位行业 :${item.workIndustry}</p>`);
      info.push("</div></div>");

      infoWindow = new AMap.InfoWindow({
        content: info.join(""), // 使用默认信息窗体框样式，显示信息内容
      });
      infoWindow.open(this.Amap, e.lnglat);
    },
  },
};
</script>
<style lang="less" scoped>
#amap-container {
  height: 100%;
}
</style>
